<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<!--控制条块状黑色-->
		<meta content="telephone=no" name="format-detection" />
		<!--禁止数字转拨号-->
		<link href="../../css/iconfont.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/second.css" />
		<script src="../../js/jquery-1.11.3.min.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
		<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
		<!--百度地图-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nxW0akynjKF8Ag0G0uVVwq0t6ak1Q1Zj"></script>
	</head>
	<body>
		<!--顶部nav-->
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<!--<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
		<span class="mui-icon mui-icon-left-nav" ></span>
	</button>-->
			<!--返回-->
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-center mui-title">更换配件</h1>
		</div>
		<!--底部固定栏-->
		<!--内容区-->
		<div class="mui-content" id="app">
			<!--维保记录表格-->
			<div class="repair-tab" style="display:none;">
				<h2></h2>
				<div class="mui-table repair-tab-head">
					<div class="mui-table-cell mui-text-center">序列</div>
					<div class="mui-table-cell mui-text-center">名称</div>
					<div class="mui-table-cell mui-text-center">价格</div>
					<div class="mui-table-cell mui-text-center">数量</div>
					<div class="mui-table-cell mui-text-center">说明</div>
				</div>
				<div class="mui-table repair-tab-body" v-for="(item,index) in list">
					<div class="mui-table-cell mui-text-center">
						<p>{{index + 1}}</p>
					</div>
					<div class="mui-table-cell mui-text-center">
						<p>{{item.pjName}}</p>
					</div>
					<div class="mui-table-cell mui-text-center">
						<p>{{item.realprice}}元</p>
					</div>
					<div class="mui-table-cell mui-text-center">
						<p>{{item.count}}</p>
					</div>
					<div class="mui-table-cell mui-text-center">
						<p>{{item.realdesc}}</p>
					</div>
				</div>

				<h2></h2>
				<div class="machine_form">
					<ul>
						<li>
							<span> 配件选择： </span>
							<div class="mac_rt">
								<select name="" v-model="pjid">
									<option value="" disabled="true">请选择</option>
									<option :value="item.pjid" v-for="(item,index) in selectList"> {{item.pjname}} </option>
								</select>
							</div>
							<div style="clear: both;"></div>
						</li>
						<li>
							<span> 配件价格： </span>
							<div class="mac_rt"><input type="number" class="mui-input" v-model="pjPrice" placeholder="请填写配件价格,免费请填0" / style="color: #666;"></div>
						</li>
						<li>
							<span> 配件数量： </span>
							<div class="mac_rt"><input type="number" class="mui-input" v-model="pjNum" /></div>
						</li>
						<li>
							<span> 更换说明： </span>
							<div class="mac_rt"><textarea name="" v-model="pjExplain"></textarea></div>
						</li>
						<li class="machine-btn"> <button @click="submit"> 提交 </button> </li>
					</ul>
				</div>
			</div>
		</div>


		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.view.js"></script>
		<script src="../../js/loading.js"></script>
		<script src="../../js/main.js"></script>

		<script src="../../libs/mustache.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					userid: "",
					token: "",
					caseid: "",
					list: [],
					selectList: [],
					pjPrice: "",
					pjid: "",
					pjNum: "",
					pjName:"",
					pjExplain: ""
				},
				methods: {
					getSelect: function() {
						axios({
								url: domain + "/dtwbgl/wbprocesspj.h5",
								method: 'post',
								data: {
									caseid: this.caseid,
									userid: this.userid,
									token: this.token
								},
								transformRequest: [function(data) {
									let ret = ''
									for (let it in data) {
										ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
									}
									return ret
								}],
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
								}

							})
							.then(response => {
								var res = response.data;
								mui.hideLoading();
								if (res.code == 2001) {
									$(".repair-tab").show();
									this.selectList = res.data;
									console.log(res);
								} else if (data.code == 2002) {
									mui.toast(data.msg);
									mui.openWindow({
										url: '../../login.html',
										id: '../../login.html'
									})
								} else {
									mui.toast(data.msg);
									mui.openWindow({
										url: '../../404.html',
										id: '../../404.html'
									})
								}
							})
							.catch(error => {
								console.log(error)
								mui.openWindow({
									url: '../../login.html',
									id: '../../login.html'
								})
								this.errored = true
							})
					},
					submit: function() {
						if (this.pjid == "") {
							mui.toast('请选择配件');
							return false;
						}
						if (this.pjPrice == "") {
							mui.toast('请填写配件价格');
							return false;
						}
						if (this.pjNum == "") {
							mui.toast('请填写配件数量');
							return false;
						}
						let ctr_user = localStorage.getItem('ctr_user');
						let ctr_wbr = localStorage.getItem('ctr_wbr');
						let kind = localStorage.getItem('kind');
						let postData = {
							"pjName": this.selectList.find(item => item.pjid === this.pjid)['pjname'],
							"realprice": this.pjPrice,
							"count": this.pjNum,
							"realdesc": this.pjExplain,
							"caseid": this.caseid,
							"pjid": this.pjid,
							"kind": kind,
							"ctr_user": ctr_user,
							"ctr_wbr": ctr_wbr
						};
						this.list.push(postData);
						this.pjName = "";
						this.pjPrice = "";
						this.pjNum = "";
						this.pjExplain = "";
						console.log(postData);
						localStorage.setItem(this.caseid + '_pjlist', JSON.stringify(this.list));
					}
				},
				created: function() {
					let userid = localStorage.getItem('userid');
					let token = localStorage.getItem('token');
					let caseid = localStorage.getItem('caseid');
					let pjlist = localStorage.getItem(caseid + '_pjlist');
					if (pjlist) {
						pjlist = JSON.parse(pjlist);
						this.list = pjlist;
					}
					if (!userid || !token) {
						mui.toast("请先登陆");
						setTimeout(function() {
							// TODO 跳转登陆页面
						}, 1000);
						return false;
					}
					this.userid = userid;
					this.token = token;
					this.caseid = caseid;
					mui.showLoading("正在加载..", "#app");
					this.getSelect();
				},
			});
		</script>
	</body>
</html>
